import React ,{Component} from 'react';
import {connect} from 'react-redux';
import {addToCart} from '../actions/cart-action';
import store from '../store'
class AddCart extends Component {
	constructor(props) {
	    super(props);
		this.state ={
			payload:{
				product:'',quantity:'',unitCost:''
			}
		}
	}
	productBtn(files,event){
		let payload = this.state.payload;
		payload[files] = event.target.value;
		this.setState({
			payload:payload
		})
	}
	resetForm(){
		this.setState({
			payload:{
				product:'',quantity:'',unitCost:''
			}
		});
		this.refs.product.value = '';
		this.refs.quantity.value = '';
		this.refs.unitCost.value = '';
	}
	addCartBtn(){
		let {product,quantity, unitCost} = this.state.payload;
		if(!product||!quantity||!unitCost){
			alert("填写信息完整")
		}else{
			// this.props.addToCart(product,quantity,unitCost)	
			store.dispatch(addToCart(product,quantity,unitCost))
			this.resetForm();
		}
	}
	render(){
		return (<div>
			<h2 className="title-tips">添加购物清单</h2>
			<div className="antd-form">
				<div className="form-item">
					<label>产品:</label>
					<input type="text" placeholder="请输入产品..."  onChange={this.productBtn.bind(this,'product')} ref="product"/>
				</div>
				<div className="form-item">
					<label>规格:</label>
					<input type="text" placeholder="请输入产品规格..."  onChange={this.productBtn.bind(this,'quantity')} ref="quantity"/>
				</div>
				<div className="form-item no-line">
					<label>单价:</label>
					<input type="text" placeholder="请输入产品单价..."  onChange={this.productBtn.bind(this,'unitCost')} ref="unitCost"/>
				</div>
				<div className="sumbit-btn" onClick={this.addCartBtn.bind(this)}>
					确定提交
				</div>
			</div>
		
		</div>)
	}
}
export default connect(
    state => ({
        products:state.products,
        cart:state.shoppingCart
    }),
    {addToCart}
)(AddCart)



